<template>
    <div v-loading.fullscreen.lock="loading" class="home-container">
        <!-- 优化后的现代化导航栏 -->
        <el-container class="layout-container">
            <el-header class="header">
                <div class="nav-brand">
                    <img src="@/assets/imgs/logo_iw.png" alt="Haoke" class="logo" />
                    <span class="brand-name">Haoke</span>
                </div>

                <el-menu :default-active="activeIndex" class="nav-menu" mode="horizontal" :ellipsis="false" router>
                    <el-menu-item index="/" class="nav-item">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/article" class="nav-item">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>论坛</span>
                    </el-menu-item>
                    <el-menu-item index="/shopping" class="nav-item">
                        <el-icon>
                            <ShoppingCart />
                        </el-icon>
                        <span>商城</span>
                    </el-menu-item>
                </el-menu>

                <div class="user-section">
                    <el-dropdown v-if="user && !loading" class="user-dropdown">
                        <div class="user-info">
                            <el-avatar v-if="user.avatar" :size="40" :src="'/file/' + user.avatar" class="user-avatar" />
                            <el-avatar v-else :size="40" class="user-avatar">
                                <el-icon>
                                    <User />
                                </el-icon>
                            </el-avatar>
                            <span class="username">{{ user.username }}</span>
                            <el-icon class="dropdown-icon">
                                <ArrowDown />
                            </el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="router.push('/user')">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    个人信息
                                </el-dropdown-item>
                                <el-dropdown-item @click="router.push('/user/address')">
                                    <el-icon>
                                        <Location />
                                    </el-icon>
                                    收货地址
                                </el-dropdown-item>
                                <el-dropdown-item @click="router.push('/user/cart')">
                                    <el-icon>
                                        <ShoppingCart />
                                    </el-icon>
                                    购物车
                                </el-dropdown-item>
                                <el-dropdown-item @click="router.push('/user/order')">
                                    <el-icon>
                                        <List />
                                    </el-icon>
                                    个人订单
                                </el-dropdown-item>
                                <el-dropdown-item @click="router.push('/shopping/add')">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                    商品添加
                                </el-dropdown-item>
                                <el-dropdown-item divided @click="exit">
                                    <el-icon>
                                        <SwitchButton />
                                    </el-icon>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <!-- 当用户信息未加载时显示骨架屏 -->
                    <div v-else-if="!loading" class="user-skeleton">
                        <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />
                        <el-skeleton-item variant="text" style="width: 80px; margin-left: 10px" />
                    </div>
                </div>
            </el-header>

            <el-main class="main-content">
                <router-view v-if="!loading"></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
    House,
    Document,
    ShoppingCart,
    User,
    ArrowDown,
    Location,
    List,
    Plus,
    SwitchButton
} from '@element-plus/icons-vue'

import { getUser } from '@/api/user'
import { userStore } from '@/store/user'

const router = useRouter()
const user_store = userStore()

const user = ref()
const loading = ref(true)
const activeIndex = ref('/')

// 获取用户信息
const fetchUserInfo = async () => {
    try {
        loading.value = true
        const data = await getUser()
        user.value = data
        loading.value = false
    } catch (error) {
        loading.value = false
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败，请重新登录')
        setTimeout(() => {
            router.push({ name: 'Login' })
        }, 1000)
    }
}

// 退出登录
const exit = () => {
    user_store.del_token()
    router.push({ name: 'Login' })
}

onMounted(() => {
    fetchUserInfo()
})
</script>

<style lang="less" scoped>
.home-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.layout-container {
    min-height: 100vh;
}

.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    .logo {
        height: 40px;
        width: auto;
    }

    .brand-name {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
        letter-spacing: 1px;
    }
}

.nav-menu {
    background: transparent;
    border: none;
    flex: 1;
    justify-content: center;

    .nav-item {
        margin: 0 10px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(103, 126, 234, 0.1);
        }

        &.is-active {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }
    }
}

.user-section {
    display: flex;
    align-items: center;
}

.user-skeleton {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(103, 126, 234, 0.1);
}

.user-dropdown {
    .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 20px;
        background: rgba(103, 126, 234, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(103, 126, 234, 0.2);
        }

        .user-avatar {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .username {
            font-weight: 500;
            color: #2c3e50;
        }

        .dropdown-icon {
            color: #909399;
            font-size: 12px;
        }
    }
}

.main-content {
    background: rgba(255, 255, 255, 0.9);
    margin: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    min-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .nav-brand {
        margin-bottom: 10px;
    }

    .nav-menu {
        width: 100%;
        justify-content: space-around;
    }

    .user-section {
        margin-top: 10px;
    }

    .main-content {
        margin: 10px;
    }
}
</style>